<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Tigua Clock</title>
        <meta http-equiv="content-language" content="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="David M. Lopez">
        <meta name="description" content="Canvas JavaScript Library">
        <meta name="keywords" content="JavaScript Library, Tigua, Canvas">
        <meta name="viewport" content="width=450; user-scalable=no">
        <script src="tigua.js" type="text/javascript" charset="utf-8"></script>

        <script>

        function startup() {

          //create canvas object passing in id of canvas tag in page
          var c = new tigua.canvas('cnvs');

          //set background of canvas to white
          c.setBackground("#AAAAAA");

          var i = new Image();
          i.src = "/home/david/Firefox_wallpaper.png";
          i.width=600;
          i.height=450;
          
          for (var x=4;x>=0;x-=1) {
              for (var y=4;y>=0;y-=1) {
                  var img = new tigua.image_slice({
                      img:i,
                      x:x*120,
                      y:y*90,
                      sx:x*120,
                      sy:y*90,
                      width:120,
                      height:90,
                      listeners: {
                          'click': function() {
                             this.moveTo(480,360,1000,'bounce');
                             this.rotateTo(Math.PI*2,1000,'linear');
                          }
                      }
                  });

                  c.addComponent(img);
              }          
          }
          
          c.render();
          //c.startAnimation(500);
        }
        </script>
    </head>
    <body onload="startup();">
      <canvas id="cnvs" width="600" height="450"></canvas>
    </body>
</html>
